<template>
	<view>

		<view class="" v-if="data">

			<view class="yjnshi">
				<p style="text-align: center;font-weight: 800;">今日运势</p>
				
				
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">速配生肖</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['速配生肖']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">提防生肖</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['提防生肖']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运颜色</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['幸运颜色']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运数字</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['幸运数字']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运宝石</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['幸运宝石']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">综合分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['综合分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">爱情分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['爱情分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">事业分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['事业分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">心情分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['心情分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">交际分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['交际分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">今明运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['今明运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">爱情运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['爱情运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">事业运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['事业运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">财富运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['财富运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">健康运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['健康运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">财富分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['交际分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">健康分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['今日运势']['健康分数']}}</p>
					</view>
				</view>
				
			</view>
			<view class="yjnshi">
				<p style="text-align: center;font-weight: 800;">明日运势</p>
				
				
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">速配生肖</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['速配生肖']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">提防生肖</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['提防生肖']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运颜色</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['幸运颜色']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运数字</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['幸运数字']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">幸运宝石</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['幸运宝石']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">综合分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['综合分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">爱情分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['爱情分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">事业分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['事业分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">心情分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['心情分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">交际分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['交际分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">今明运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['今明运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">爱情运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['爱情运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">事业运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['事业运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">财富运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['财富运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">健康运势</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['健康运势']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">财富分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['交际分数']}}</p>
					</view>
				</view>
				<view class="infos">
					<view class="title">
						<text class="shu"></text>
						<text class="ti">健康分数</text>
					</view>
					<view class="content">
						<p class="details">{{data['明日运势']['健康分数']}}</p>
					</view>
				</view>
				
			</view>
		</view>
	<!-- 	<view class="fenxiang">
			<button open-type="share">分享给朋友</button>
		</view> -->
		<view class="yl">
			<text>仅供娱乐！请勿当真</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: null,
			}
		},
		onLoad(o) {
			
			this.query(o.name,o.type)
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
			     withShareTicket: true,
			     menus: ['shareAppMessage', 'shareTimeline']
			    })
			return{
					title:"看看你今天的生肖运势吧",
					imageUrl:"https://www.leedong.top/img/suangua1.jpg"
			}
			
			},
			//2.分享到朋友圈
	onShareTimeline(){

		return {
			title: '看看你今天的生肖运势吧',
			 imageUrl:"https://www.leedong.top/img/suangua1.jpg"
			
		}
	},
	onReady() {
		wx.showShareMenu({
		 withShareTicket: true,
		 menus: ['shareAppMessage', 'shareTimeline']
		})
	},

		methods: {
			
			query(v,type) {
				let parmas={
					'api_key':"FNcQHQuf0W8wDrXMjWc0xqTzw",
					'type':1,
					'title_yunshi':type
				}
				uni.request({
					url:'https://api.yuanfenju.com/index.php/v1/Zhanbu/yunshi',
					method: 'POST',
					data: parmas,
					header: {'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						console.log(res)
						this.data=res.data.data;
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fenxiang{
		width: 100%;
		position: fixed;
		bottom: 10px;
		button{
			width: 60%;
			border: none;
			background: transparent;
			outline: 0;
			font-size: 28rpx;
		}
	}
	.uni-list-cell {
		width: 95%;
		margin: auto;
		display: flex;
		align-items: center;
		height: 80px;
		padding: 10px;

		box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	}

	.uni-list-cell-db {
		height: 34px;
		border-radius: 9px;
		width: 100%;
		border: 1px solid #e5e5e5;
		background-color: #fff;
		padding-left: 25px;
		font-size: 14px;
		line-height: 34px;
		border-right: 0;
	}

	.xiala {
		position: absolute;
		left: 120px;
	}

	.query {
		color: cornflowerblue;
		height: 36px;
		border: 1px solid #e5e5e5;
		border-left: 0;
		width: 50px;
		line-height: 35px;
		border-radius: 0px 10rpx 10rpx 0;
		color: 28rpx;
		background-color: #e5e5e5;
		text-align: center;
		position: absolute;
		right: 8px;

	}

	.infos {
		margin-top: 30rpx;

		.title {
			display: flex;
			padding: 20rpx;

			.shu {

				width: 5px;
				height: 20px;
				background-color: #e6a84b;
				border-radius: $uni-border-radius-base;
			}

			.ti {
				padding-left: 15rpx;
				font-weight: 800;
			}
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			margin-left: 18px;
			margin-right: 18px;

			.items {
				width: 50%;
				margin-top: 15px;
				font-size: 27rpx;
			}

			.details {
				font-size: 27rpx;
				user-select: all;
			}
		}
	}
</style>